<template lang="">
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="派单顺序列表" name="first">
        <el-button @click="issort=true">修改排序</el-button>
        <el-table
          v-if="activeName == 'first'"
          :data="DispatchOrderList"
          style="width: 100%"
          border>
        <el-table-column prop="name" label="派单顺序"> </el-table-column>
        <el-table-column prop="sort"  label="排序"> 
        </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="抽号机设置" name="second">
        <el-table
          v-if="activeName == 'second'"
          :data="DispatchOrderList_2"
          stripe
          style="width: 100%"
          border
        >
          <el-table-column prop="field_name" label="派单顺序">
          </el-table-column>
          <el-table-column prop="color" label="是否展示">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_show"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                @change="switch_change(scope.row.is_show, scope.row.id)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="字体大小">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.size"
                :step="1"
                :max="3"
                :min="1"
                @change="size_input(scope.row.size, scope.row.id)"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="sort" label="排序"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="流水号设置" name="third">
        <el-table
          :data="dataList_2"
          v-if="activeName == 'third'"
          stripe
          style="width: 100%"
          border
        >
          <el-table-column prop="prefix_custom" label="前缀">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.prefix_custom"
                @blur="prefix_custom_change(scope.row.prefix_custom)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="日期">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.date"
                placeholder="请选择日期"
                @change="date_change"
              >
                <el-option label="年" :value="1"></el-option>
                <el-option label="年月" :value="2"></el-option>
                <el-option label="年月日" :value="3"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="serial_number" label="序号">
            <template slot-scope="scope">
              <el-input
                placeholder="请输入序号位数"
                type="number"
                v-model="scope.row.serial_number"
                @blur="serial_number_change(scope.row.serial_number)"
              >
                <template slot="append">位</template>
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="抽号机管理卡设置" name="fourth">
        <el-row v-if="activeName == 'fourth'">
          <el-col :span="3">
            <!-- <el-input v-model="color" placeholder="请输入颜色名称"></el-input> -->
          </el-col>
          <el-col :span="4">
            <!-- <el-button @click="clolr_click" class="add_btn" icon="el-icon-search">
          搜索</el-button
        > -->
            <el-button
              @click="add_color"
              v-permission="'system:users:add'"
              icon="el-icon-plus"
              class="add_btn"
              >抽号机管理卡</el-button
            >
          </el-col>
        </el-row>
        <el-table
          :data="dataList"
          v-if="activeName == 'fourth'"
          stripe
          style="width: 100%"
          border
        >
          <el-table-column prop="card_name" label="名称"> </el-table-column>
          <el-table-column prop="card_number" label="卡号"> </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click="set_product(scope.row)"
                type="text"
                icon="el-icon-edit"
                >编辑</el-button
              >
              <el-popconfirm
                confirm-button-text="确定"
                cancel-button-text="取消"
                icon="el-icon-info"
                icon-color="red"
                title="是否删除这条数据？"
                @confirm="del_product(scope.row)"
              >
                <el-button slot="reference" type="text" icon="el-icon-delete">
                  删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            @prev-click="prev"
            @next-click="next"
            :current-page.sync="pagination.page"
            :page-size="pagination.per_page"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>

        <el-dialog
          :title="title"
          :visible.sync="isProduct"
          width="30%"
          :close-on-click-modal="false"
          @close="close_dialog"
        >
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="名称" prop="card_name">
              <el-input
                v-model="ruleForm.card_name"
                placeholder="请输入卡号名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="卡号" prop="card_number">
              <el-input v-model="ruleForm.card_number" disabled>
                <el-button
                  @click="getka"
                  slot="append"
                  icon="el-icon-plus"
                  style="background: #1890ff; color: #fff"
                  >读卡</el-button
                >
              </el-input>
            </el-form-item>

            <el-row
              style="
                display: flex;
                justify-content: space-around;
                align-items: center;
                text-align: center;
                margin-bottom: 15px;
              "
            >
              <el-col :span="10" style="font-size: 12px; font-weight: bold"
                >读卡通讯程序下载</el-col
              >
              <el-col :span="10">
                <el-button @click="dwone_duka" style="float: left"
                  >下载</el-button
                >
              </el-col>
            </el-row>

            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="ruleForm.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="isProduct = false">取 消</el-button>
            <el-button type="primary" @click="submitadd('ruleForm')"
              >确定</el-button
            >
          </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="订单审核管理" name="five">
        <el-table
          :data="dataList_3"
          stripe
          style="width: 100%"
          v-if="activeName == 'five'"
          border
        >
          <el-table-column prop="audit_name" label="审核名称">
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
                @change="switch_change(scope.row.status, scope.row.id)"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>


    <el-dialog
          :title="title"
          :visible.sync="issort"
          width="30%"
          :close-on-click-modal="false">
        <el-row v-for="(item,index) in DispatchOrderList" :key="index" class="issort_s">
           <el-col :span="4">
               {{item.name}}
           </el-col>
           <el-col :span="20">
            <el-input-number
                v-model="item.sort"
                :step="1"
                :max="4"
                :min="1"
              ></el-input-number>
            </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="isProduct = false">取 消</el-button>
            <el-button type="primary" @click="submitadd('ruleForm')"
              >确定</el-button
            >
          </span>
    </el-dialog>

  </div>
</template>
<script>
import {
  getDispatchOrderList,
  setDispatchOrder,
  getInvoicesList,
  setInvoicesSort,
  setInvoicesValue,
  getRuleSerialNumber,
  setRuleSerialNumber,
  getManagementCardList,
  createManagementCard,
  delManagementCard,
  getOrderAuditList,
  setOrderAuditStatus,
} from "@/api/product/index";

// import Sortable from "sortablejs";
export default {
  data() {
    return {
      issort:false,
      activeName: "first",
      pagination: {
        per_page: 10,
        page: 1,
      },
      oldIndex: null,
      newIndex: null,
      total: 0,
      DispatchOrderList: [],
      col: [
        { label: "派单顺序", prop: "name" },
        { label: "排序", prop: "sort" },
      ],
      sort_arr: [],
      loading: "true",

      //   ----------------
      DispatchOrderList_2: [],
      sort_arr: [],
      //   ------------------
      dataList_2: [],
      // ----
      title: "",
      isProduct: false,
      dataList: [],
      ruleForm: {
        card_name: "",
        card_number: "",
        remark: "",
        id: "",
      },
      rules: {
        card_name: [
          {
            required: true,
            message: "请输入卡号名称",
            trigger: "blur",
          },
        ],
        card_number: [
          {
            required: true,
            message: "请输入卡号",
            trigger: "blur",
          },
        ],
      },
      dataList_3: [],
    };
  },
  mounted() {
    // 派单顺序
    this.get_DispatchOrderList();
    // 抽号机
    this.get_DispatchOrderList_2();
    // 流水号
    this.getlist();
    //抽号机管理卡
    this.getlists();

    this.getlist_3();
  },
  methods: {
    // ___派单顺序列表_____
    get_DispatchOrderList() {
      this.sort_arr = [];
      getDispatchOrderList().then((res) => {
        if (res.code == 200) {
          this.DispatchOrderList = res.data;
          this.loading = false;
          this.DispatchOrderList.forEach((item) => {
            let obj = {
              id: item.id,
              sort: item.sort,
            };
            this.sort_arr.push(obj);
          });
        }
      });
    },
    set_DispatchOrder(arr) {
      this.loading = true;
      setDispatchOrder({
        sort_arr: arr,
      }).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.get_DispatchOrderList();
        }
      });
    },
   
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex == this.newIndex) {
        return "warning-row";
      }
      return "";
    },
    sort_input(sort,id){
      this.set_DispatchOrder(_this.sort_arr);
    },
    // 抽号机设置
    size_change(val, id) {
      ;
      let prms = {
        id,
        field: "size",
        value: val,
      };
      setInvoicesValue(prms).then((res) => {
        ;
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.get_DispatchOrderList();
        }
      });
    },
    size_input(val, id) {
      ;
      if (val > 3) {
        this.$message.error("请填写正确的倍数：1，2，3");
        let DispatchOrderList = this.DispatchOrderList;
        DispatchOrderList.forEach((item) => {
          if (item.id == id) {
            item.size == 1;
          }
        });
        this.DispatchOrderList = DispatchOrderList;
        return false;
      } else {
        this.size_change(val, id);
      }
    },
    switch_change(val, id) {
      let prms = {
        id,
        field: "is_show",
        value: val,
      };
      setInvoicesValue(prms).then((res) => {
        ;
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.get_DispatchOrderList();
        }
      });
    },
    get_DispatchOrderList_2() {
      this.sort_arr = [];
      getInvoicesList().then((res) => {
        if (res.code == 200) {
          this.DispatchOrderList_2 = res.data;
          this.DispatchOrderList_2.forEach((item) => {
            let obj = {
              id: item.id,
              sort: item.sort,
            };
            this.sort_arr.push(obj);
          });
        }
      });
    },
    set_DispatchOrder(arr) {
      setInvoicesSort({
        sort_arr: arr,
      }).then((res) => {
        if (res.code == 200) {
          this.get_DispatchOrderList_2();
        }
      });
    },
    // 流水号---------------------
    getlist() {
      this.dataList_2 = [];
      getRuleSerialNumber().then((res) => {
        if (res.code == 200) {
          this.dataList_2.push(res.data);
        }
      });
    },
    //前缀
    prefix_custom_change(val) {
      let data = {
        prefix_custom: val,
      };
      setRuleSerialNumber(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.getlist();
        }
      });
    },
    //年月日
    date_change(val) {
      ;
      let data = {
        data: val,
      };
      setRuleSerialNumber(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.getlist();
        }
      });
    },
    //位数
    serial_number_change(val) {
      ;
      let data = {
        serial_number: val,
      };
      setRuleSerialNumber(data).then((res) => {
        if (res.code == 200) {
          this.$message.success("提交成功");
          this.getlist();
        }
      });
    },
    // ----------------
    dwone_duka() {
      window.open("https://api.likai.vip/exe/card.exe", "_blank");
    },
    getka() {
      var that = this;
      that
        .$axios("http://127.0.0.1:9191/getCardId")
        .then(function (response) {
          
          if (response.data.state == 0) {
            that.ruleForm.card_number = response.data.cardid;
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    close_dialog() {
      this.ruleForm = {
        card_name: "",
        card_number: "",
        remark: "",
        id: "",
      };
    },
    del_product(row) {
      console.log("ww");
      delManagementCard({
        id: row.id,
        is_del: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.isProduct = false;
          this.$message.success("提交成功");
          this.getlist();
        }
      });
    },
    getlists() {
      getManagementCardList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      });
    },
    set_product(row) {
      this.ruleForm = row;
      this.title = "卡片编辑";
      this.isProduct = true;
    },
    add_color() {
      this.title = "新增卡片";
      this.isProduct = true;
      this.$nextTick(function () {
        this.$refs.ruleForm.resetFields();
      });
    },
    submitadd(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          createManagementCard(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.isProduct = false;
              this.$message.success("提交成功");
              this.getlist();
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleSizeChange(val) {
      ;
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      ;
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },
    getlist_3() {
      getOrderAuditList().then((res) => {
        if (res.code == 200) {
          this.dataList_3 = res.data.data;
        }
      });
    },
    switch_change(val, id) {
      let prms = {
        id,
        status: val,
      };
      setOrderAuditStatus(prms).then((res) => {
        ;
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.getlist();
        }
      });
    },
  },
};
</script>

<style scoped>
.el-table >>> .el-table__body-wrapper tbody {
  cursor: move;
}
.el-table >>> .warning-row {
  background: #1168b9 !important;
  color: #fff !important;
}
.issort_s{
  display: flex;
}
</style>
